<template>
	<div class="step-comp">
    <ul class="step-comp-wrap">
      <div class="step-comp-wrap-line"><i></i></div>
      <li class="step-comp-wrap-item current"><i>1</i><div class="text">选择商品</div></li>
      <li class="step-comp-wrap-item"><i>2</i><div class="text">支付参与</div></li>
      <li class="step-comp-wrap-item"><i>3</i><div class="text">参团支付</div></li>
      <li class="step-comp-wrap-item"><i>4</i><div class="text">拼团成功</div></li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
  export default Vue.extend({
    name: 'index'
  })
</script>

<style  lang="scss">
  @import "src/styles/variables";
  .step-comp{
    &-wrap{
      font-size: 24px;
      display: flex;
      flex-direction: row;
      position: relative;
      &-item{
        padding-top: 20px;
        flex: 1;
        text-align: center;
        position: relative;
        z-index: 2;
        font-size: 0;
        &.current{
          i{
            background: $mainColor;
          }
        }
        i{
          display: inline-block;
          line-height: 24px;
          font-size: 24px;
          padding: 8px;
          width: 40px;
          border-radius: 50%;
          background: #dedede;
          text-align: center;
          color: #fff;
        }
        .text{
          font-size: 24px;
          margin-top: 20px;
          color: #999;
        }
      }
      &-line{
        width: 100%;
        position: absolute;
        z-index: 1;
        top: 40px;
        i{
          display: block;
          border-top:3px solid #eee;
          width: 500px;
          margin: 0 auto;
        }
      }
    }
  }
</style>
